<template>
    <div class="good-list-item" @click="onClickAction">
        <div class="good-cover" :style="{'background-image': 'url(' + cover + ')'}"></div>
        <div class="good-name">{{name}}</div>
        <div class="sale-info clearfix">
            <span v-if="price" class="fl">
                <span class="unit">￥</span>
                <span class="price">{{priceCurrency}}</span>
            </span>
            <span class="fr sales-volume">销量{{salesVolume}}</span>
        </div>
        <div class="btn btn-mobile btn-small btn-red btn-block" @click.stop="onClickAction">
            {{actionText}}
        </div>
    </div>
</template>

<script>
import {
    currency,
} from '@/lib/utils';

export default {
    name: 'GoodListItem',
    props: {
        cover: {
            type: String,
        },
        /** 名字 */
        name: {
            type: String,
        },
        /** 价格 */
        price: {
            type: String,
        },
        /** 销量 */
        salesVolume: {
            type: Number,
        },
        /** 点击时返回的内容 */
        rt: {},
        /** 按钮文本 */
        actionText: {
            type: String,
        },
    },
    computed: {
        /** 价格文本 */
        priceCurrency() {
            return this.price ? currency(this.price) : '';
        },
    },
    methods: {
        onClickAction() {
            this.$emit('click', this.rt);
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

// 商品列表
.good-list-item {
    box-sizing: border-box;
    padding: 10rpx;
    background: @white-color;
    .good-cover {
        height: 167px;
        background: center no-repeat;
        background-size: cover;
    }
    .sale-info {
        height: @text-huge-line-height;
    }
    .unit {
        font-size: @text-small-font-size;
        line-height: @text-large-line-height;
        color: @color-red;
    }
    .price {
        .text-large();
        color: @color-red;
    }
    .sales-volume {
        font-size: @text-small-font-size;
        line-height: @text-large-line-height;
        color: @grey-color;
    }
    .btn.btn-mobile.btn-small {
        padding: 10rpx 0;
    }
}
</style>